<template>
    <div class="svg-icons">
        <svg aria-hidden="true">
            <use :href="symbolId" :fill="color"/>
        </svg>
    </div>
</template>
<script>
export default defineComponent({
    name: 'svgIcons',
    props: {
        prefix: {
            type: String,
            default: 'icon',
        },
        name: {
            type: String,
            required: true,
        },
        color: {
            type: String,
            default: '',
        },
    },
    setup(props) {
        const symbolId = computed(() => `#${props.prefix}-${props.name}`);
        return {
            symbolId,
        };
    }
});
</script>